<template>
  <el-dialog
          model-value="dialogVisible"
          :title="dialogTitle"
          width="40%"
          align-center
          @close="handleClose"
  >
    <el-button type="success" @click="innerVisible=true" style="margin-bottom: 15px">选择资产</el-button>
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules" :disabled="formDisabled">
      <el-form-item label="资产编号" prop="zcbh">
        <el-input v-model="form.zcbh" placeholder="资产编号..." readonly/>
      </el-form-item>
      <el-form-item label="资产名称" prop="zcmc">
        <el-input v-model="form.zcmc" placeholder="资产名称..." readonly/>
      </el-form-item>
      <el-form-item label="资产原值" prop="yuanzhi">
        <el-input v-model="form.yuanzhi" placeholder="资产原值..." readonly/>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="资产类别" prop="typeid">
            <el-select v-model="form.typeid" placeholder="资产类别..." readonly>
              <el-option
                      v-for="item in selectAssetTypeOptionData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      disabled
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="折旧年限" prop="zjnx">
            <el-input-number v-model="form.zjnx" :min="0"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="折旧方法" prop="zjff">
            <el-select v-model="form.zjff" placeholder="请选择折旧方法">
              <el-option
                      v-for="(item,index) in zjffObj"
                      :key="index"
                      :label="item.value"
                      :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
    <AssetsDialog
            v-model="innerVisible"
            :dialogVisible="innerVisible"
            @id="getAssetById"
    />
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import request from "@/util/request";
import { ElMessage } from 'element-plus';
import AssetsDialog from "@/views/page/components/assetsDialog";

/**
 *对话框属性初始化
 */
const props = defineProps(
    {
      dialogTitle: {
        type: String,
        default: '',
        required: true
      },
      dialogVisible: {
        type: Boolean,
        default: false,
        required: true
      }
    }
)

/**
 * 监听属性的变化
 */
watch(
    () => props.dialogVisible,
    (value) => {
      if (value === true) {
        getAssetType();
      }
    }
)

/**
 * 表单响应式变量
 */
const formRef = ref(null)

/**
 *初始化表单数据
 */
const form = ref({
  id: -1,
  zcbh: "",
  zcmc: "",
  rksj: "",
  assetid: -1,
  typeid: "",
  zjff: "",
  zjnx: 0,
  yuanzhi: "",
})

/**
 * 自定义折旧年限检验规则
 */
const zjnxValidator = (rule, value, callback) => {
  if (!value) {
    callback(new Error("折旧年限不能默认为0"));
  } else {
    callback();
  }
}

/**
 * 表单校验规则
 */
const rules = ref({
  zcbh: [{required: true, trigger: "blur", message: "资产编号为空"}],
  zcmc: [{required: true, trigger: "blur", message: "资产名称为空"}],
  yuanzhi: [{required: true, trigger: "blur", message: "资产原值为空"}],
  typeid: [{required: true, trigger: "blur", message: "资产类别为空"}],
  zjnx: [{required: true, trigger: "blur", validator: zjnxValidator}],
  zjff: [{required: true, trigger: "blur", message: "请选择折旧方法"}],
})

/**
 * 打开资产dialog
 */
const innerVisible = ref(false)

/**
 * 获得所有的资产类别信息
 */
const selectAssetTypeOptionData = ref([]);

/**
 * 获取资产类别信息，填充下拉框
 */
const getAssetType = async () => {
  const res = await request.get("assetType/list");
  console.log(res.data.assetTypeList);
  selectAssetTypeOptionData.value = res.data.assetTypeList;
}

/**
 * 资产类别下拉框禁用
 */
const formDisabled = ref(true);

/**
 * 回显数据
 */
const getAssetById = async (id) => {
  if (id === -1) {
    ElMessage.error("未选中数据");
  } else {
    ElMessage.success("选择成功");
    const res = await request.get("/asset/" + id);
    console.log(res.data.asset)
    formDisabled.value = false;
    form.value.zcbh = res.data.asset.zcbh;
    form.value.zcmc = res.data.asset.zcmc;
    form.value.rksj = res.data.asset.rksj;
    form.value.assetid = res.data.asset.id;
    form.value.typeid = res.data.asset.typeId;
    form.value.yuanzhi = res.data.asset.zcje;
  }
}

const zjffObj = ref([
  {value: "平均年限法"},
  {value: "年数总和法"}
])

/**
 * 向父组件抛方法
 */
const emits = defineEmits(['update:modelValue', 'initAssetDepList'])

/**
 * 手动关闭对话框
 */
const handleClose = () => {
  emits('update:modelValue', false);
  formRef.value.resetFields();
  form.value.assetid = -1;
}

/**
 * 提交方法
 */
const handleConfirm = () => {
  if (form.value.assetid === -1) {
    ElMessage.error("请选择数据")
  } else {
    formRef.value.validate(async (valid) => {
      if (valid) {
        const res = await request.post("assetDepreciation/save", form.value);
        ElMessage.success(res.data.msg);
        emits('initAssetDepList');
        handleClose();
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.item_input {
  display: none;
  font-size: 13px;
}

.item_txt {
  display: block;
  width: 100px;
}
</style>